<template>
	<view class="service-page p-2 h-100 overflow-y">
		<view class="mb-3 bgcolor1 p-2 rounded">
			<view class="fs-32 font-weight-bolder ftcolor1 titleLine flex align-center mb-2">智慧党建</view>
			<view class="flex align-center text-center mt-3 justify-between">
				<view class="flex flex-column border py-1 rounded-circle bgcolor7 w-33"
					@click="navTo('/pages/service/dangyuanxuexi')">
					<text class="fs-24 text-white">党员学习</text>
				</view>
				<view class="flex flex-column border py-1 rounded-circle bgcolor7 w-33"
					@click="navTo('/pages/service/dangjiandongtai')">
					<text class="fs-24 text-white">党建动态</text>
				</view>
				<view class="flex flex-column border py-1 rounded-circle bgcolor7 w-33"
					@click="navTo('/pages/service/xianfengmofan')">
					<text class="fs-24 text-white">先锋模范</text>
				</view>
			</view>
		</view>
		<view class="mb-3 bgcolor1 p-2 rounded">
			<view class="fs-32 font-weight-bolder ftcolor1 titleLine flex align-center mb-2">积分银行</view>
			<view class="flex  text-center mt-3 flex-wrap justify-between">
				<view class="flex flex-column border py-1 rounded-circle bgcolor7 w-33 mb-4"
					@click="navTo('/shopPages/layout/layout?page=IndexPage')">
					<text class="fs-24 text-white">积分商城</text>
				</view>
				<view class="flex flex-column border py-1 rounded-circle bgcolor7 w-33 mb-4"
					@click="navTo('/pages/service/cunqingjieshao')">
					<text class="fs-24 text-white">志愿活动</text>
				</view>
				<view class="flex flex-column border py-1 rounded-circle bgcolor7 w-33 mb-4"
					@click="navTo('/pages/takephoto/takephoto?title=随手拍')">
					<text class="fs-24 text-white">随手拍</text>
				</view>
				<view class="flex flex-column border py-1 rounded-circle bgcolor7 w-33 "
					@click="navTo('/pages/service/cunqingjieshao')">
					<text class="fs-24 text-white">积分排名</text>
				</view>
			</view>
		</view>
		<view class="mb-3 bgcolor1 p-2 rounded">
			<view class="fs-32 font-weight-bolder ftcolor1 titleLine flex align-center mb-2">综合办理</view>
			<view class="flex  text-center mt-3 flex-wrap justify-between">
				<view class="flex flex-column border py-1 rounded-circle bgcolor7 w-33 mb-4"
					@click="navTo('/pages/service/toupiaodiaoyan?title=投票调研')">
					<text class="fs-24 text-white">投票调研</text>
				</view>
				<view class="flex flex-column border py-1 rounded-circle bgcolor7 w-33 mb-4"
					@click="navTo('/pages/service/banshizhinan?title=办事指南')">
					<text class="fs-24 text-white">办事指南</text>
				</view>
				<view class="flex flex-column border py-1 rounded-circle bgcolor7 w-33 mb-4"
					@click="navTo('/pages/service/banshizhinan?title=农技培训')">
					<text class="fs-24 text-white">农技培训</text>
				</view>
				<view class="flex flex-column border py-1 rounded-circle bgcolor7 w-33 "
					@click="navTo('/pages/service/xiangcundaolan?title=乡村导览')">
					<text class="fs-24 text-white">乡村导览</text>
				</view>
				<view class="flex flex-column border py-1 rounded-circle bgcolor7 w-33 "
					@click="navTo('/pages/service/xiangcundaolan?title=一村一品')">
					<text class="fs-24 text-white">一村一品</text>
				</view>
				<view class="flex flex-column border py-1 rounded-circle bgcolor7 w-33 "
					@click="navTo('/pages/service/cunminyishi?title=村民议事')">
					<text class="fs-24 text-white">村民议事</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {

			}
		},
		computed: {
			...mapGetters(['getRegions', 'getUser', 'getCurRegion']),
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.service-page {
		.service-item {
			height: 200rpx;
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: center bottom;

			&.img1 {
				background-image: url('/static/images/img1.jpg');
			}

			&.img2 {
				background-image: url('/static/images/img2.jpg');
			}

			&.img3 {
				background-image: url('/static/images/img3.jpg');
			}

			&.img4 {
				background-image: url('/static/images/img4.jpg');
			}

			&.img5 {
				background-image: url('/static/images/img5.jpg');
			}

			&.img6 {
				background-image: url('/static/images/img6.jpg');
			}

			&.img7 {
				background-image: url('/static/images/img7.jpg');
			}

			.flur10 {
				background-color: rgba(80, 126, 247, 0.3);
				border-radius: 5px;
			}
		}
	}
</style>